<template>
  <div>
    <h1>App</h1>
    <ul>
      <li>
        <RouterLink to="/home/index?name=jack&age=20">Home</RouterLink>
        <button @click="router.push('/home/index?name=jack&age=30')">home</button>
        <!-- <button @click="$router.push('/home/index?name=jack&age=30')">home</button> -->
      </li>
      <li>
        <RouterLink to="/shop/index/100">Shop-100</RouterLink>
      </li>
      <li>
        <RouterLink to="/shop/index/200">Shop-200</RouterLink>
      </li>
      <li>
        <RouterLink to="/cart/index">Cart</RouterLink>
      </li>
      <li>
        <RouterLink to="/userindex">User</RouterLink>
      </li>
      <li>
        <RouterLink to="/user100">User/100</RouterLink>
      </li>
    </ul>
    params:{{ route.params }}
    <hr>
    query:{{ route.query }}
    <hr>
    <!-- {{ $route.params }} -->
    <RouterView></RouterView>
  </div>
</template>
<script setup>
import { watch } from 'vue';
import { onBeforeRouteUpdate, useRoute,useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();


onBeforeRouteUpdate((to,form,next)=>{
  next();
});


watch(route, (a, b) => {
  console.log(a, b);
})

watch(() => route.params.id, (a, b) => {
  console.log(a, b);
})


</script>

<style>
div {
  border: solid;
  padding: 10px;
}
</style>